<script setup lang="ts">
import { ref, reactive, onMounted, toRaw } from "vue";
import { editMailboxApi, getMailboxInfoApi } from "../../../api/mailbox";
import Editor from "../../../components/Table/Editor";
import { useMailboxStatus } from "@/hooks/index";
import { ElMessage } from "element-plus";
// ------------------------------------------

// ================================================================
const isShow = ref(false);
const formRef = ref();
const direction = ref("rtl");
const names = ref("first");
const emit = defineEmits(["updateList"]);
const getMailboxStatus = useMailboxStatus();
// const getComplainStatus = useComplainStatus();
// const getRepairStatus = useRepairStatus();

// ================================================================
// 表单信息
const defaultState = {
  pageSize: 10,
  current: 1,
  community_code: "",
  content: "", //信件内容
  reply: "", //回复内容
  community: "", //小区名称
  member: "", //发件人
  title: "", //信箱标题
  status: null, //状态
  create_time: "",
};
const formData = reactive({ ...defaultState });
// 验证规则
const formRules = {
  status: [{ required: true, message: "请选择", trigger: "change" }],
  reply: [{ required: true, message: "请选择", trigger: "blur" }],
};
// -----------------------------------------------------------------
// 表单提交事件
const onSubmit = async () => {
  try {
    await editMailboxApi(formData);
    // 提示成功
    ElMessage.success("操作成功");
    // 关闭弹框
    isShow.value = false;
    // 列表更新
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};
// 表单关闭事件
const handleClose = () => {
  // 移除校验
  formRef.value.resetFields();
  // 重置表单数据
  Object.assign(formData, { ...defaultState });
  // 关闭表单
  isShow.value = false;
};
// 表单回显 --------------------------------------------------------
const replyData = async (id) => {
  // 发起请求
  const { data } = await getMailboxInfoApi(id);
  console.log(data);

  Object.assign(formData, data);
  isShow.value = true;
};

// 富文本
const changeInput = (val) => {
  console.log(val);

  formData.reply = val;
};

// -------------------------------------------------------------
defineExpose({
  isShow,
  replyData,
});
</script>

<template>
  <el-drawer
    v-model="isShow"
    title="回复信件"
    size="50%"
    :direction="direction"
    :before-close="handleClose"
  >
    <!-- <template #header>
      <h4>新增活动</h4>
    </template> -->

    <template #default>
      <el-tabs class="demo-tabs" v-model="names">
        <el-tab-pane label="信件内容" name="first">
          <el-form
            label-position="top"
            :model="formData"
            ref="formRef"
            label-width="100px"
            :inline="true"
            size="normal"
          >
            <el-form-item style="width: 40%" label="所属小区">
              <el-input v-model="formData.community_code" disabled></el-input>
            </el-form-item>
            <el-form-item style="width: 40%" label="投诉名称">
              <el-input v-model="formData.title" disabled></el-input>
            </el-form-item>
            <el-form-item style="width: 100%" label="信件内容">
              <el-input
                v-model="formData.content"
                type="textarea"
                placeholder="暂无内容"
                size="normal"
                disabled
                @change=""
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="回复信件" name="second">
          <el-form
            label-position="top"
            :model="formData"
            ref="editForm"
            :rules="formRules"
            label-width="100px"
            :inline="true"
            size="normal"
          >
            <el-form-item label="处理状态" prop="status" style="width: 100%">
              <el-radio-group v-model="formData.status">
                <el-radio
                  v-for="item in getMailboxStatus"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <el-form-item label="信件内容" style="width: 100%" prop="reply">
              <Editor
                :value="formData.reply"
                :min-height="100"
                @update:input="changeInput"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </template>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped></style>
